<style scoped lang="less">
.page-header{
	position: relative;
	background: url(../assets/images/iot-header.png) no-repeat center;
	background-size: auto 100%;
	&:before,&:after{
		content: "";
		position: absolute;
		top: 0;
		width: 50px;
		height: 100%;
		background: url(../assets/images/iot-header.png) no-repeat;
		background-size: auto 100%;
	}
	&:before{
		left: 0;
		background-position: top left
	}
	&:after{
		right: 0;
		background-position: top right
	}
}
</style>
<template>
	<el-header class="page-header">
		<img class="logo" :src="titleImg" alt="">
	</el-header>
</template>
<script>
import { mapState } from 'vuex'
const fireTitle = require('../assets/images/unit-iot-title-fire.png')
const smokeTitle = require('../assets/images/unit-iot-title-smoke.png')
const monitorTitle = require('../assets/images/unit-iot-title-monitor.png')
const autoTitle = require('../assets/images/unit-iot-title-auto.png')
const poolTitle = require('../assets/images/unit-iot-title-pool.png')
const gasTitle = require('../assets/images/unit-iot-title-gas.png')
const titleImg = {
	fire: fireTitle,
	smoke: smokeTitle,
	monitor: monitorTitle,
	auto: autoTitle,
	pool: poolTitle,
	gas: gasTitle
}
export default {
	name: 'pageHeader',
	props: {},
	computed: {
		...mapState([
			'siteInfos'
		]),
		titleImg () {
			return titleImg[this.type]
		}
	},
	watch: {},
	data () {
		return {
			loading: false,
			type: this.$route.query.type
		}
	},
	methods: {
		editAction () {},
		exitAction () {
			this.$post('/systemsetup/systemsetup/logout').then(()=>{
				this.$store.commit('setSiteInfos',null)
				this.$router.replace('/login')
			}, err => {
				this.$message.error(err.msg)
			})
		},
		goHome () {
			this.$router.replace('/')
		}
	},
	created () {
		// 
	},
}
</script>